<!DOCTYPE html>
<html>
<head>
    <title>登录 | 米塔企业微云</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="customize/css/login.css" rel="stylesheet"/>
</head>
<body>
<form class="login-content" id="loginForm">
    <div class="input-wrapper">
        <input class="login-input" type="text" name="username" id="username" placeholder="输入手机号" autocomplete="false">
    </div>
    <div class="input-wrapper">
        <input class="login-input" type="password" name="password" id="password" placeholder="输入密码"
               autocomplete="new-password">
    </div>
    <div class="input-wrapper d-flex">
        <div class="flex-1">
            <input class="login-input" type="text" name="captcha" id="captcha" placeholder="输入验证码"
                   style="padding-right: 120px;" autocomplete="off" maxlength=4>
        </div>
        <span class="login-verif-code d-flex align-items-center">
            <img id="captchaImg" src="../sys/captcha?" onClick="this.src=this.src+Math.random();" title="点击刷新"></span>
    </div>
    <div class="button-wrapper">
        <button class="login-btn d-flex justify-content-center" type="submit" style=" padding-bottom: 15px;"><span>登录</span></button>
    </div>
    <div class="d-flex justify-content-between group-wrapper font-p14" style="padding: 0 10px">
        <a href="regist.html">注册账号</a>
        <a href="forgetPassword.html">忘记密码</a>
    </div>
</form>
<script src="plugins/jquery-3.4.1.min.js"></script>
<script src="plugins/alert.js"></script>
<script src="customize/js/CommonUtils.js"></script>
<script>
    $(function () {
        if (top.location.href != window.location.href) {
            top.location.href = "/index.html";
        }
        itemsResize();
    });

    /* 监测窗口大小改变 */
    var resizeWaiter = false;
    $(window).resize(function () {
        if (!resizeWaiter) {
            resizeWaiter = true;
            setTimeout(function () {
                itemsResize();
                resizeWaiter = false;
            }, 500);
        }
    });

    /* 根据窗口大小缩放、调整位置 */
    function itemsResize() {
        var content_width = $('.login-content').width();
        var body_width = document.documentElement.clientWidth;//获取页面可见宽度
        var body_height = document.documentElement.clientHeight;//获取页面可见高度
        var scale = body_width / 1920;
        var oright_height = 1080 * scale;//缩放后的容器实际高度
        var offset_y = (body_height - oright_height) / 2; //背景在非全屏下的纵向偏移修正
        $('.login-content').css({
            transform: 'scale(' + scale + ')',
            transformOrigin: 'center top 0px',
            marginTop: offset_y * 0.3 //输入块在非全屏下的纵向偏移修正
        });
    }

    /* submit防抖 */
    var submitWaiter = false;
    $("#loginForm").on("submit",function (event) {
        event.preventDefault();
        if (!submitWaiter) {
            submitWaiter = true;
            setTimeout(function () {
                login();
                submitWaiter = false;
            }, 1000);
        }
    });

    function login() {
        if (!$('#username').val()) {
            myAlert('提示', '手机号不能为空');
            return;
        }
        if (!$('#password').val()) {
            myAlert('提示', '密码不能为空');
            return;
        }
        if (!$('#captcha').val()) {
            myAlert('提示', '验证码不能为空');
            return;
        }
        var formData = $('#loginForm').serialize();
        getJson('/sys/login', formData, 'POST', function (data) {
            if (data['code'] == 200) {
                //window.location.href = host + '/pages/home.html';
                sessionStorage.setItem("token", data['payload']['token']);
                sessionStorage.setItem("isLogin", "true");
                window.location.replace(host + '/pages/home?token=' + data['payload']['token']);
            } else {
                myAlert('提示', data['message'], function () {
                    getCaptcha();
                })
            }
        });
    }

    function getCaptcha() {
        var img = $('#captchaImg');
        img.attr('src', host + '/sys/captcha?' + Math.random());
    }
</script>
</body>
</html>